<template>
	<view class="mons">
		<view class="list">

			<view class="li" :key="l.id" v-for="l in data.oOrderDetails">
				<view class="con" @click="che(l)">
					<view class="img">
						<image :src="l.DefaultImage" mode="widthFix"></image>
					</view>
					<view class="text">
						{{l.cProductName}}

					</view>
					<view class="numb">
						￥{{l.fSalePrice}}
						<view>
							x{{l.iQuantity}}
						</view>
					</view>
					<image v-if="l.checked" class="ops" src="../../static/img/3/3-43.png" mode="widthFix"></image>
				</view>
				<view class="list-t" v-if="l.checked">
					<view class="li" @click.stop='changeType(l)'>
						{{l.returnText}}
						<view class="rig">
							<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="li typeRow" v-if="l.showType">
						<view class="option_type" :class="l.selectType==1?'active':''" @click.stop="setType(l,1)">我要退款
							<image v-if="l.selectType==1" src="../../static/img/gou@2x.png" mode="widthFix"></image>
						</view>
						<view class="option_type" v-if="cNextStatus!='DELIVERGOODS'"
							:class="l.selectType==2?'active':''" @click.stop="setType(l,2)">我要退货
							<image v-if="l.selectType==2" src="../../static/img/gou@2x.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="li" @click.stop='fks(l)'>
						{{l.yuan}}
						<view class="rig">
							<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="li">
						请选择退款金额
						<view class="rig">
							<!-- <image src="../../static/img/3/3-99.png" mode="widthFix"></image> -->
							<input type="text" v-model='l.price' v-if="l.selectType == 2" />
							<text v-if="l.selectType == 1">{{l.money}}</text>
						</view>
					</view>
					<view class="li" v-if="l.selectType == 2">
						请选择退货数量
						<view class="rig">
							<!-- <image src="../../static/img/3/3-99.png" mode="widthFix"></image> -->
							<input type="text" v-model='l.numbers' />
						</view>
					</view>
					<view class="textare">
						<textarea v-model="l.con" :maxlength="max" placeholder="请输入退货问题描述" />
						<view class="number">
							{{l.con.length}}/{{max}}
						</view>
					</view>
				</view>

			</view>


		</view>
		<view class="out" @click="jamp">
			提交
		</view>
		<view class="txtbox">
			<view class="title">
				温馨提示：
			</view>
			<view class="p">
				• 商品寄回地址将在审核通过后以短信形式告知，或在申请记录中查询。<br>
				• 提交服务单后，售后专员可能与您电话沟通，请保持手机畅通。<br>
				• 退货处理成功后退款金额将原路返回到您的支持账户中
			</view>
		</view>
		<view class="meng" v-if="meng">
			<view class="tan">
				<view class="h4">
					退货原因
					<view class="close" @click="close">
						<image src="../../static/img/3/3-1.png" mode="widthFix"></image>
					</view>
				</view>
				<scroll-view scroll-y="true" class="li-box">
					<view v-for="l in liso" :key="l.id" class="lis" :class="{'active':ce==l.reason}"
						@click="check(l.reason)">
						{{l.reason}}
						<image src="../../static/img/3/3-43.png" mode="widthFix"></image>
					</view>
				</scroll-view>
				<view class="over" @click="moe">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				lo: 0,
				ce: 1,
				meng: false,
				con: '',
				max: 500,
				qq: '',
				liso: [],
				yuan: '请选择退货原因',
				data: [],
				money: 0,
				num: 0,
				returnType: 0,
				showType: false,
				selectType: 0,
				price: '',
				numbers: '',
				limitPrice: 0,
				cNextStatus: "",
				current: 0,
			}
		},
		onLoad(options) {
			var that = this;
			that.ids = options.id
			that.num = options.num
			that.money = options.money
			that.$Request.post(
				that.$api.httpApi.user.closeoder + '&token=' + that.$SysCache.get('token'), {
					type: "orderrefund"
				}
			).then(res => {
				if (res.code == 200) {
					that.liso = res.data;
				}
			});

			that.$Request.post(
				that.$api.httpApi.user.oderPay + '&token=' + that.$SysCache.get('token'), {
					cOrderNo: options.cOrderNo
				}
			).then(res => {
				console.log(res.data)
				if (res.code == 200) {
					res.data.oOrderDetails.forEach((item, index) => {
						let obj = {
							con: '',
							max: 500,
							yuan: this.liso[0].reason,
							money: 0,
							num: 0,
							returnText: "我要退款",
							returnType: 1,
							showType: false,
							selectType: 1,
							price: '',
							numbers: '',
							limitPrice: 0,
							checked: false
						}

						that.$set(res.data.oOrderDetails, index, {
							...item,
							...obj
						})
						console.log(res.data.oOrderDetails[index])
					})

					that.data = res.data;
					that.cNextStatus = res.data.cNextStatus
					that.lo = res.data.oOrderDetails[0].id;





				}
			});
		},
		computed: {

		},
		methods: {

			changeType(item) {
				item.showType = !item.showType

			},
			getReson(item) {
				let that = this
				that.$Request.post(
					that.$api.httpApi.order.getReturnDetail + '&token=' + that.$SysCache.get('token'), {
						iDetailId: item.id
					}
				).then(resd => {
					if (resd.code == 200) {
						console.log(resd.data)

						if (resd.data.cNextStatus == "DELIVERGOODS") {
							item.num = 0
						} else {
							item.num = resd.data.iQuantity
						}
						item.money = resd.data.fCanReturnMoney

						item.price = resd.data.fCanReturnMoney
						item.limitPrice = resd.data.fCanReturnMoney


					}
				});

			},
			setType(item, val) {
				item.selectType = val
				if (val == 1) {
					item.returnText = "我要退款"
				} else {
					item.returnText = "我要退货"
				}
				item.showType = false
				// this.returnType = val
			},
			che(item) {
				item.checked = !item.checked
				if (item.checked) {
					this.getReson(item)
				}


			},
			jamp() {
				var that = this;
				if (this.current == this.data.oOrderDetails.length) {
					uni.navigateBack({
						
					})
				}
				if (this.data.oOrderDetails[this.current]) {
					this.data.oOrderDetails.forEach((item, index) => {
						if (this.current == index) {
							let quantity = item.numbers
							let money = null
							if (item.selectType == 2) {
								if (item.numbers == 0) {
									uni.showToast({
										title: "未发货商品不能退货"
									});
								} else {
									if (item.numbers <= item.iQuantity) {
										quantity = item.numbers
									} else {
										uni.showToast({
											title: "退款数量不能大于总数量"
										});
										return false
									}
								}

							}
							if (item.price <= item.limitPrice) {
								money = item.price
							} else {
								uni.showToast({
									title: "退款金额不能大于总金额"
								});
								return false
							}
							if (item.selectType == 1) {
								money = item.money
							}
							if(item.checked){
								that.$Request.post(
									that.$api.httpApi.user.tui + '&token=' + that.$SysCache.get('token'), {
										iDetailId: item.id,
										reason: item.yuan,
										quantity: quantity,
										money: money,
										description: item.con
									}
								).then(res => {
									that.current++
									that.jamp()
									
								
								});
							}
							
						}




					})
				}






			},

			subData(item, quantity, money) {
				let that = this
				that.$Request.post(
					that.$api.httpApi.user.tui + '&token=' + that.$SysCache.get('token'), {
						iDetailId: item.id,
						reason: item.yuan,
						quantity: quantity,
						money: money,
						description: item.con
					}
				).then(res => {
					// if (res.code == 200) {
					// }
				});
			},
			fks(item) {
				this.currentItem = item
				this.meng = true
			},
			moe() {
				this.currentItem.yuan = this.ce;
				this.meng = false
			},
			add() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						// uni.uploadFile({
						//     url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
						//     filePath: tempFilePaths[0],
						//     name: 'file',
						//     formData: {
						//         'user': 'test'
						//     },
						//     success: (uploadFileRes) => {
						//         console.log(uploadFileRes.data);
						//     }
						// });
					}
				});
			},
			close() {
				this.meng = false
			},
			check(id) {
				this.ce = id;
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				// url: '/pages/user/vipjs'
			})
		}

	}
</script>

<style scoped lang="less">
	.numb {
		width: 90rpx;
		text-align: right;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		display: inline-block;
		vertical-align: middle;
	}

	.numb view {
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 12rpx;
	}

	.txtbox {
		padding-left: 25rpx;
		padding-right: 25rpx;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		margin-top: 70rpx;
	}

	.txtbox .title {
		font-size: 29rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333;
	}

	.txtbox .p {
		line-height: 55rpx;
	}

	.ges {
		height: 70rpx;
		background: rgba(255, 255, 255, 1);
		font-size: 25rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		padding-left: 30rpx;
		padding-right: 30rpx;
		line-height: 70rpx;
		margin-bottom: 10rpx;
	}

	.ges input {
		display: inline-block;
		vertical-align: middle;
		width: 60%;
		font-size: 25rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.ges text {
		display: inline-block;
		width: 157rpx;
	}

	.imgbox {
		margin-top: 26rpx;
	}

	.imgbox .boxs {
		display: inline-block;
	}

	.imgbox image {
		display: inline-block;
		width: 161rpx;
		height: 114rpx;
		border: 1px solid rgba(234, 234, 234, 1);
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.imgbox .add {
		display: inline-block;
		width: 145rpx;
		height: 145rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.imgbox .add image {
		margin: 0;
		width: 145rpx;
		height: 145rpx;
	}

	.textare .h3 {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.number {
		text-align: right;
		margin-top: 10rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(183, 183, 183, 1);
	}

	.textare {
		margin-top: 10rpx;
		background: #fff;
		padding: 28rpx;
		margin-bottom: 10rpx;
	}

	.textare textarea {
		display: block;
		width: 100%;
		height: 170rpx;
		font-size: 23rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(183, 183, 183, 1);
	}

	.over {
		width: 613rpx;
		height: 65rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 33rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 65rpx;
		text-align: center;
		margin: auto;
		margin-top: 32rpx;
	}

	.li-box {
		height: calc(100% - 99rpx - 170rpx);
		overflow: auto;
	}

	.li-box .lis {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999;
		width: 90%;
		margin: auto;
		height: 65rpx;
		line-height: 65rpx;
	}

	.li-box .lis image {
		width: 26rpx;
		float: right;
		margin-top: 20rpx;
		display: none;
	}

	.li-box .active {
		color: #666;
	}

	.li-box .active image {
		display: block;
	}

	.meng {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.59);
	}

	.out {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		width: 680rpx;
		height: 65rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 33rpx;
		margin: auto;
		text-align: center;
		line-height: 65rpx;
		margin-top: 80rpx;
	}

	.meng .tan {
		background: #fff;
		position: absolute;
		left: 0;
		bottom: 0;
		height: 720rpx;
		width: 100%;
	}

	.meng .tan .h4 {
		height: 99rpx;
		border-bottom: 1px solid #d6d6d6;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 99rpx;
		text-align: center;
		position: relative;
	}

	.meng .tan .h4 .close {
		position: absolute;
		width: 99rpx;
		height: 99rpx;
		right: 0;
		top: 0;
		text-align: center;
		line-height: 99rpx;
	}

	.meng .tan .h4 .close image {
		display: inline-block;
		width: 20rpx;
		margin: auto;
	}

	.list .li {
		margin-bottom: 1px;
		background: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 35rpx;
		padding-top: 35rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);

		&.typeRow {
			display: flex;
			justify-content: space-around;

			.option_type {
				width: 185upx;
				height: 42upx;
				background: rgba(233, 233, 233, 0);
				border: 1px solid #999;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 15upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999;

				&.active {
					border: 1px solid rgba(239, 64, 111, 1);
					color: rgba(239, 64, 111, 1);
					position: relative;

					image {
						width: 21upx;
						height: 21upx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}

			}
		}
	}

	.list .li .rig {
		display: inline-block;
		float: right;

		input {
			display: inline-block;
			width: auto;
			vertical-align: middle;
			margin-left: 19rpx;
			text-align: right;
		}
	}

	.list .li .rig image {
		display: inline-block;
		width: 16rpx;
		vertical-align: middle;
		margin-left: 19rpx;
	}

	.list .li .rig text {
		display: inline-block;
		vertical-align: middle;
	}

	.list .inli {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.list .inli input {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(183, 183, 183, 1);
		height: 50rpx;
	}

	uni-page-body {
		height: 100%;
	}

	.mons {
		min-height: 100%;
		background: #EEEEEE;
		position: relative;
	}

	.top {
		background: url(../../static/img/3/3-35.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 65rpx;
		padding-bottom: 65rpx;
	}

	.head {
		width: 124rpx;
		height: 124rpx;
		display: block;
		background: rgba(255, 255, 255, 0.53);
		border: 1px solid rgba(255, 255, 255, 0.53);
		border-radius: 50%;
		margin: auto;
	}

	.head image {
		display: block;
		width: 102rpx;
		height: 102rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 50%;
		margin: auto;
		margin-top: 10rpx;
	}

	.name {
		text-align: center;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-top: 17rpx;
	}

	.con .text {
		display: inline-block;
		vertical-align: middle;
		width: 400rpx;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 30rpx;
		margin-left: 20rpx;
	}

	.con .text .bu {
		display: block;
		width: 162rpx;
		height: 31rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 5rpx;
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 30rpx;
		text-align: center;
		margin-top: 15rpx;
	}

	.con .img {
		display: inline-block;
		vertical-align: middle;
		width: 130rpx;
		height: 130rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(228, 228, 228, 1);
		border-radius: 5rpx;
		text-align: center;
		line-height: 130rpx;
	}

	.con .img image {
		display: inline-block;
		width: 70%;
		margin: auto;
		vertical-align: middle;
	}

	.con .ops {
		width: 26rpx;
		float: right;
		/* display: none; */
		margin-top: 52rpx;
	}
</style>
